<!-- <template>
	<view>
	    <b><text>维修方式:</text></b> <text>到店维修</text> <text>上门取车</text>
		<view class="crent">
		<b><view>客户信息</view></b>	
		<view class="a">
			车主姓名:<input v-model="helperName" placeholder="请输入车主姓名" />
		</view>
		<view class="a">
			联系方式:<input v-model="helperName" placeholder="请输入联系方式" />
		</view>
		
		<view class="a">
			预约时间:<input v-model="helperName" placeholder="请选择时间" />
		</view>
			<b><view class="xinxi">车辆信息</view></b>	
			
			<text>车辆类型:</text>
			<select v-model="selectedOption">
				<option value="请选择">请选择</option>
				<option value="奔驰">奔驰</option>
				<option value="宝马">宝马</option>
				<option value="兰博基尼">兰博基尼</option>
			</select>
			<view class="a">
			车牌号:<input v-model="helperName" placeholder="请输入车牌号" />
			</view>
			<b><view>照片</view></b>
			<view>整张照片:
			<view class="mokuai">
				<view>+</view>
				<view>上传照片</view>
			</view>
			</view>
			
			
			<view>维修部位照片:
			<view class="mokuai">
				<view>+</view>
				<view>上传照片</view>
			</view>
			</view>
		</view>
		<button @click="submit">
			提交
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedOption:"请选择",
				helperName:"",
				
			}
		},
		methods: {
			submit(){
				uni.redirectTo({
					url:"/pages/service/text/text"
				})
			}
			
		}
	}
</script>

<style> -->
<template>
	<view>
		<view class="page">
			<!-- 顶部蓝色背景 -->
			<view class="re-top">

			</view>

			<!-- 选择维修方式部分 -->
			<view class="blue">
				<view class="selectMethod">

					<view>维修方式</view>
					<!-- 表单单选框 -->
					<view>
						<radio-group @change="getValue" v-model="selectedValue">
							<label class="radio-container" v-for="(item, index) in radioOptions" :key="index">
								<radio style="transform:scale(0.8);" :value="item.value">{{ item.label }}</radio>
							</label>
						</radio-group>
					</view>

				</view>
			</view>


			<view class="formBox">
				<view class="userInfo">
					<view class="text">客户信息</view>
					<view class="infoFlex">
						<view class="uni-input-text">车主姓名</view>
						<input type="text" placeholder="请输入车主姓名" v-model="formData.name" />
					</view>
					<view class="infoFlex">
						<view class="uni-input-text">联系方式</view>
						<input type="text" placeholder="请输入联系方式" v-model="formData.phone" />
					</view>
					<view class="infoFlex">
						<view class="uni-input-text">预约时间</view>
						<input type="text" placeholder="请选择预约时间" v-model="formData.dateTime" />
						
					</view>
					<view v-show="isShow" class="infoFlex">
						<view class="uni-input-text">取车位置</view>
						<input type="text" placeholder="请输入取车位置" v-model="formData.address" />
					</view>

				</view>

				<view class="carInfo">
					<view class="text">车辆信息</view>
					<view class="infoFlex">
						<view class="uni-input-text">车辆类型</view>
						<input type="text" placeholder="请选择车辆类型" v-model="formData.type" />
					</view>
					<view class="infoFlex">
						<view class="uni-input-text">车牌号</view>
						<input type="text" placeholder="请输入车牌号" v-model="formData.carId" />
					</view>
				</view>

				<view class="picture">
					<view class="text">照片</view>
					<view class="">
						<text>整车照片：</text>
						<uni-file-picker v-model="totalCar" fileMediatype="image" mode="grid" @select="select"
							@progress="progress" @success="success" @fail="fail" />
					</view>
					<view class="">
						<text>维修部位照片</text>
						<uni-file-picker v-model="partCar" fileMediatype="image" mode="grid" @select="select"
							@progress="progress" @success="success" @fail="fail" />
					</view>

				</view>
				<!-- 提交按钮 -->
				<view class="bottomBtn" @click="submit">
					提交
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//日期时间
			

				//整车图片
				totalCar: [],
				//维修部位图片
				partCar: [],

				// 表单数据
				formData: {
					name: '',
					phone: '',
					address: '',
					carId: '',
					datetime:'',
					type:''
				},
				// 控制部分标签的显示与隐藏
				isShow: false,

				// 单选框部分
				selectedValue: '',
				radioOptions: [{
						label: '到店维修',
						value: 'r1'
					},
					{
						label: '上门取车',
						value: 'r2'
					},
				],

				//是否勾选维修方式
				isChoose: ''

			}
		},
		mounted() {

		},
		methods: {
			getValue(e) {
				console.log(e.detail.value)
				this.isChoose = e.detail.value
				if (e.detail.value == 'r1') {
					this.isShow = false
				} else {
					this.isShow = !this.isShow
				}
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},

			//提交表单
			submit() {
				if (!this.isChoose) {
					uni.showToast({
						title: '请勾选维修方式',
						icon: 'error',
						duration: 2000, //提示的延迟时间，单位毫秒，默认：2000

					});
				} else {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000, //提示的延迟时间，单位毫秒，默认：2000

					});
					setTimeout(() => {

						uni.navigateTo({
							url: "/pages/service/text/text",
							animationType: 'pop-in',
							animationDuration: 2000
						})
					}, 1500);



				}
			}

		}
	}
</script>

<style>
	.page {
		background-color: #F5F5F5;
	}

	.re-top {
		width: 750rpx;
		height: 350rpx;
		background-color: #1E90FF;
		position: fixed;
	}

	.blue {
		width: 100%;
		height: 150rpx;
		background-color: #1E90FF;
		position: fixed;
		z-index: 2;
	}

	.selectMethod {
		width: 90%;
		padding: 0 20rpx 0 20rpx;
		height: 120rpx;
		background-color: white;
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		line-height: 120rpx;

	}

	.radio-container {
		margin-left: 20rpx;

	}

	.formBox {
		width: 95%;
		left: 0;
		right: 0;
		margin: auto;
		height: 1300rpx;
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
		position: absolute;
		top: 150rpx;
		z-index: 1;
		border-radius: 30rpx;


	}

	.userInfo {
		width: 98%;
		padding: 0 1% 0 1%;
		height: auto;
		background-color: white;
		padding-bottom: 20rpx;
		/* position: absolute;
		top: 150rpx;
		left: 0;
		right: 0;
		margin: auto; */
		border-radius: 30rpx;


	}

	.carInfo {
		width: 98%;
		padding: 0 1% 0 1%;
		height: auto;
		background-color: white;
		padding-bottom: 20rpx;
		/* position: absolute;
		top: 670rpx;
		left: 0;
		right: 0; */
		margin: 20rpx auto;
		border-radius: 30rpx;
	}

	.picture {
		width: 98%;
		padding: 0 1% 0 1%;
		height: auto;
		background-color: white;
		padding-bottom: 30rpx;
		/* position: absolute;
		top: 990rpx;
		left: 0;
		right: 0; */
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.bottomBtn {
		width: 70%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		border-radius: 30rpx;
		background-color: #1E90FF;
		margin-bottom: 20rpx;
		margin: 30rpx auto;
		margin-bottom: 20rpx;

	}

	.userInfo .text,
	.carInfo .text,
	.picture .text {
		width: 98%;
		height: 80rpx;
		background-color: white;
		margin: 10rpx auto;
		padding: 0 10rpx 0 5rpx;
		line-height: 80rpx;
		border-bottom: 2px solid #F5F5F5;
	}

	.infoFlex {
		display: flex;
		justify-content: space-around;
		margin-top: 25rpx;
		background-color: white;

	}

	.infoFlex>view {
		width: 30%;
		background-color: #1E90FF;
		text-align: center;
		border-radius: 35rpx;
		font-size: 12px;
		color: white;
		height: 74rpx;
		line-height: 74rpx;
	}

	.infoFlex>input {
		width: 64%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 12px;

		border-radius: 35rpx;
		border: 2rpx solid #F5F5F5;
	}
</style>
	button{
		width: 200px;
		height: 50px;
		background-color: blue;
		margin-top: 30px;
	}
	.xinxi{
		margin-bottom: 10px;
	}
	.mokuai{
		width: 104px;
		height: 104px;
		background-color: aqua;
		margin: 0 auto;
		text-align: center;
		
	}
	
	
	.crent{
		margin-left: 10px;
		margin-top: 20px;
	}
	text :nth-child(1){
		margin-left: 10px;
		
	}
	text :nth-child(4){
		margin-left: -20px;
	
		
	}
	text{
		font-size: 15px;
		margin-right: 50px;
		
	}
	input {
		width: 200px;
		height: 30px;
		border: 1px solid black;
		float: right;
		margin-right: 50px;
	
	}
	.a {
		width: 375px;
		height: 50px;
		border-bottom: 1px solid cornflowerblue;
		margin-top: 10px;
	
	}

</style>
